<template>
  <div class="works-download-container">
    <div class="download-header">
      <el-button text @click="onDownloadAll">全部开始</el-button>
      <el-button text @click="onStopAll">全部停止</el-button>
      <el-button text @click="onRemoveAll">全部删除</el-button>
    </div>
    <div class="download-list" v-if="dataSource?.length">
      <el-card v-for="item in dataSource" :key="item.worksId">
        <div class="download-content__title">{{ item.fileName }}</div>
        <template #footer>
          <div class="download-content__tool">
            <div>{{ item.percent }}</div>
            <div @click="onToolClick(item)">{{ StatusToolLabel[item.status] }}</div>
            <div @click="onRemove(item)">删除</div>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import type { PropType } from 'vue'
import { isObject } from 'shared'
import { type WorksAwait, DownloadStatus } from './shared'

const StatusToolLabel: Record<DownloadStatus, string> = {
  [DownloadStatus.None]: '下载',
  [DownloadStatus.Loading]: '停止',
  [DownloadStatus.Fail]: '下载',
}

export default defineComponent({
  name: 'WorksDownload',
  props: {
    dataSource: {
      type: Array as PropType<WorksAwait[]>,
    },
  },
  emits: {
    downloadAll: null,
    stopAll: null,
    removeAll: null,
    remove(target: WorksAwait) {
      return isObject(target)
    },
    download(target: WorksAwait) {
      return isObject(target)
    },
    stop(target: WorksAwait) {
      return isObject(target)
    },
  },
  setup(props, { emit }) {
    function onDownloadAll() {
      emit('downloadAll')
    }

    function onStopAll() {
      emit('stopAll')
    }

    function onRemoveAll() {
      emit('removeAll')
    }

    function onToolClick(target: WorksAwait) {
      switch (target.status) {
        case DownloadStatus.None:
        case DownloadStatus.Fail:
          emit('download', target)
          break
        case DownloadStatus.Loading:
          emit('stop', target)
          break
        default:
          break
      }
    }

    function onRemove(target: WorksAwait) {
      emit('remove', target)
    }

    return { DownloadStatus, StatusToolLabel, onDownloadAll, onStopAll, onRemoveAll, onToolClick, onRemove }
  },
})
</script>

<style lang="scss">
.works-download-container {
  height: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  .download-header {
    padding: 20px;
    border-bottom: 1px solid #999;

    .el-button + .el-button {
      margin: 0;
    }
  }

  .download-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;

    .el-card {
      --el-card-padding: 10px;
    }

    .el-card + .el-card {
      margin-top: 10px;
    }
  }

  .download-content__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .download-content__tool {
    display: flex;
    justify-content: end;
    column-gap: 10px;

    & > div {
      cursor: pointer;
    }
  }
}
</style>
